<template>
	<div class="hidden-custom-explain" @click.prevent="closeCustomExplain">
		<div class="explain-content">
			<div class="explain-header">
				<div class="title">
				<span>主题宴会</span>
			</div>
			</div>
			<div class="explain-body">
				<div class="explain-item" v-for="(item,index) in arr">
					<div class="subtitle">
						{{item.title}}
					</div>
					<div class="content">
						{{item.content}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				arr:[{
					title:"什么是主题宴会",
					content:"根据您的需求，提供桌面、花卉及环境布置，打造专属的就餐气氛，提供一体化就餐服务"
				},{
					title:"我们能提供",
					content:"发布会客户宴请、纪念日、寿庆祝派对、冷餐会、下午茶、开业宴请、年会等。"
				},{
					title:"场地可选",
					content:"您可以自选提供场地，也可以用yami场地进行定制"
				}]
			}
		},
		mounted() {

		},
		methods: {
			closeCustomExplain(){
				this.$emit("hideCustomExplain",false)
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.hidden-custom-explain {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1900;
		.explain-content {
			z-index: 1901;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			max-height: 70%;
			padding: 50px 40px 100px;
			background-color: #fff;
			.explain-header {
				margin-bottom: 80px;
				.title {
					font-size: 48px;
					color: #cfb5a3;
					letter-spacing: 8px;
				}
			}
			.explain-body {
				.explain-item {
					padding-bottom: 100px;
					.subtitle {
						margin-bottom: 20px;
						font-size: 40px;
						color: #4A4A4A;
					}
					.content {
						font-size: 30px;
						color: #76777b;
						line-height: 42px;
					}
				}
			}
		}
	}
</style>